<template>
  <view class="u-page">
    <search-module></search-module>
    <view class="u-demo-block">
      <view class="u-demo-block__content">
        <u-row customStyle="margin-bottom: 10px">
          <u-col span="3">
            <view class="demo-layout left">
              <!-- 左侧分类列表 -->
              <ul @click='switchCate'>
                <li class="cate_item" v-for="item in cateList" :key="item.cate_id" :data-cate_id="item.cate_id">
                  <view class="container">
                    <image :src="item.cate_image_src"></image>
                    <p>{{item.cate_name}}</p>
                  </view>
                </li>
              </ul>
            </view>
          </u-col>
          <u-col span="9">
            <view class="demo-layout right">
              <!-- 右侧课程列表 -->
              <ul @click="toClass">
                <li class="class_item item-mask" v-for="item in classes" :key="item.class_id"
                  :data-class_id="item.class_id">
                  <view class="container">
                    <image :src="item.class_image_src"></image>
                    <span>
                      <p>{{item.class_name}}</p>
                      <p>{{item.class_introduce}}</p>
                    </span>
                  </view>
                </li>
              </ul>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getCate,
    getClasses,
    switchCate
  } from '../../utils/cate.js'
  export default {
    data() {
      return {
        cateList: [],
        classes: [],
        cateId: ''
      };
    },
    onLoad() {
      getCate(this)
      getClasses(2001, this)
    },
    onShow() {
      try {
        const value = uni.getStorageSync('cate_id');
        if (value) {
          console.log(value);
          this.cateId = value
          uni.removeStorage('cate_id')
        }
      } catch (e) {
        console.log(e);
      }
    },
    methods: {
      getCate: getCate,
      switchCate(e) {
        return switchCate(e, this)
      }
    },
  }
</script>

<style lang="less">
  .u-page {
    .u-demo-block {

      // 左侧类别样式
      .left {
        background-color: #fff;

        ul {
          height: 1200rpx;
          overflow-y: scroll;
          text-align: center;

          // 每个类别的样式
          .cate_item {
            // 遮罩层
            position: relative;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
            }

            .container {
              margin: 10rpx 10rpx;
              border-bottom: 1px solid grey;

              image {
                width: 80rpx;
                height: 70rpx;
              }
            }
          }
        }

      }

      .right {
        ul {
          height: 1200rpx;
          overflow-y: scroll;

          .class_item {
            // 遮罩层
            position: relative;
            margin: 20rpx;
            padding: 20rpx;
            border-radius: 20rpx;
            background-color: #fff;

            // 遮罩层
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
            }

            .container {
              display: flex;

              image {
                width: 180rpx;
                height: 140rpx;
              }

              span {
                margin-left: 10rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
